<script setup>
import { countdownEmits } from 'element-plus';
import { ref, reactive, onMounted } from 'vue'
import 'element-plus/dist/index.css'
import { ElText, ElScrollbar } from 'element-plus';
const props = defineProps({
    // props
    message: {
        count: 0,
        pass: 0,
        max: {
            name: '',
            classes: ''
        },
        min: {
            name: '',
            classes: ''
        },
        classes: [],
        average: [],


    }
})
</script>

<template>
    <div class="DivSide">
        <div>
            <h2>总人数</h2>
            <h3>{{ message.count }}</h3>

        </div>
        <div>
            <h2>总分最高</h2>
            <el-text type="primary">{{ message.max.name }} {{ message.max.classes }}</el-text>
        </div>
        <div>
            <h2>总分最低</h2>
            <el-text type="danger">{{ message.min.name }} {{ message.min.classes }}</el-text>
        </div>
        <div>
            <h2>全班及格率</h2>
            <el-text v-if="message.pass >= 60" type="success">{{ message.pass }}</el-text>
            <el-text v-else type="danger">{{ message.pass }}</el-text>
        </div>

        <div class="Table">
            <h3>每个班平均分(总分300)</h3>
            <el-scrollbar max-height="50%" style="height: 390px;">
                <div v-for="classes in message.classes" class="class-row">
                    <div class="Divclass1">
                        {{ classes[0] }}
                    </div>
                    <div class="Divclass2">
                        {{ classes[1] }}
                    </div>
                </div>
            </el-scrollbar>
        </div>
    </div>

</template>

<style scoped>
.Divclass1 {
    border: 1px solid #000000;
    text-align: center;
    /* padding: 0px 0px 0px 0px; */
    /* margin: 0 auto; */
    width: 100px;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    gap:0;
    border-radius: 10px 0 0 10px;
}
.Divclass2{
    flex: 1;
    text-align: center;
    border: 1px solid #000000;
    padding: 0;
    margin: 0 0 0 -1px;  
    gap: 0;
    border-radius: 0 10px 10px 0;
}

.class-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    gap:0;
}

.DivSide {
    border: 1px solid #d7d7d7;
    background-color: #f2eaea;
    text-align: center;
    padding: 10px;
    position: fixed;
    left: 0px;
    width: 200px;
    height: 660px;
    font-family: '仿宋';
    display: flex;
    flex-direction: column;
}

/* 调整内部元素间距 */
.DivSide div {
    margin-bottom: 10px;
    /* 减小底部间距 */
    padding: 5px 0;
}

/* 调整标题大小和间距 */
.DivSide h2 {
    margin: 5px 0;
    font-size: 24px;
}

.DivSide h3 {
    margin: 5px 0;
    font-size: 18px;
}

/* 确保滚动区域不会过大 */
/* .el-scrollbar {
    max-height: 500px;
} */

.el-text {
    display: block;
    text-align: center;
    padding: 0;
}

/* 滚动条内容居中 */
.el-scrollbar :deep(.el-scrollbar__view) {
    text-align: center;
}

.Table {
    margin-top: 100px;/* 增加与上方内容的距离 */
    /* height: 400px; */
    /* padding-top: 20px; */
    /* margin-bottom: 400px; */
    /* padding-bottom: 400px; */

    border-top: 2px solid #d7d7d7;
}
</style>